<template>
  <GlobalContainer className="!bg-[#F3F3F3]" :backgroundImage="`${OSS_URL}/images/baoxiu/head_bg.png`">
    <GlobalHeader title="报修详情" showBack :backgroundImage="`${OSS_URL}/images/baoxiu/head_bg.png`" :fixed="true" />
    <div class="mt-16 pb-150">
      <div class="mb-20 px-24">
        <div class="detail-c overflow-hidden rounded-20">
          <div class="status flex items-center px-32 py-24 font-bold" :class="statusClassMap[detail.status]">
            <span class="text-34 leading-50 text-[#303133]">进度详情</span>
            <span class="ml-auto text-32 leading-50">{{ statusMap[detail.status] }}</span>
          </div>

          <div class="bg-white py-36">
            <!-- 完成 -->
            <template v-for="item in (detail.repairOrderProgressVOList || []).reverse()" :key="item.id">
              <div class="mb-8 flex items-center px-32">
                <image v-if="[2, 3].includes(item.serialNumber)" class="mr-20 size-40" :src="iconMap[item.serialNumber]" />
                <div v-else class="mr-20 flex size-40 items-center justify-center">
                  <div class="size-20 rounded-full border-4 border-[#D3D7DE]" />
                </div>
                <div class="status-text text-32 leading-48 text-[#303133]">{{ item.title }}</div>
                <div class="time ml-auto text-26 font-normal leading-40 text-[#909399]">{{ item.time }}</div>
              </div>
              <div class="mx-52 mb-8 border-l-1 border-dashed border-[#90939950] px-40 pb-20 pt-10">
                <div class="mb-16 flex items-center" v-if="item.staffName">
                  <span class="text-30 leading-45 text-[#909399]">{{ item.staffName }}</span>
                </div>
                <div v-if="item.content" class="leading-normal text-justify text-28 font-normal text-[#606266]">
                  {{ item.content }}
                </div>

                <div v-if="item.remark" class="leading-normal mt-16 text-justify text-28 font-normal text-[#606266]">
                  备注：{{ item.remark }}
                </div>
                <rich-text
                  :nodes="item.feeDescription"
                  v-if="item.feeDescription"
                  class="mt-20 flex items-center text-28 leading-50 text-[#909399]"
                >
                  <!-- <span>该次报修产生了</span>
                    <span class="mx-10 text-34 font-bold text-[#303133]">￥18</span>
                    <span>元的服务费</span> -->
                  {{ item.feeDescription }}
                </rich-text>
                <div v-if="item.paymentDescription" class="mt-12 text-30 leading-45 text-[#F04864]">{{ item.paymentDescription }}</div>
              </div>
            </template>
          </div>
        </div>
      </div>

      <div class="order-detail rounded-20 bg-white p-40">
        <div class="mb-30 flex font-bold text-[#303133]">
          <span class="text-34 leading-50">工单详情</span>
        </div>
        <div class="label mb-16">留言</div>
        <div class="value mb-50 break-all">{{ detail.content || '无' }}</div>
        <div class="mb-30 flex items-center">
          <div class="label mr-40">期望上门时间</div>
          <div class="value">{{ detail.expectedStartTime || '无' }}</div>
        </div>
        <div class="mb-30 h-1 bg-[#D3D7DE80]" />
        <div class="label mb-16">照片</div>
        <div class="flex flex-wrap gap-34">
          <image class="size-200" :src="item" v-for="item in (detail.images || '').split(',') || []" :key="item" />
        </div>
      </div>

      <div class="btn-c px-30 py-20 pb-safe" v-if="detail.status === 2">
        <div class="btn" @tap="payHandle">支付订单</div>
      </div>
    </div>
  </GlobalContainer>
</template>

<script setup>
import { ref } from 'vue'
const OSS_URL = import.meta.env.VITE_OSS_URL
import { statusMap } from './config'
import { getRepairOrderDetail, paymentRepairOrder } from '@/common/api/report'
const iconMap = {
  2: '../../static/images/baoxiu/wait_icon.png',
  3: '../../static/images/baoxiu/done_icon.png'
}
const statusClassMap = {
  1: 'status-wait',
  2: 'status-waitpay',
  3: 'status-waitdone',
  4: 'status-waitdone',
  5: 'status-done',
  6: 'status-cancel'
}
onLoad(options => {
  getDetail(options.id)
})

const detail = ref({})
const getDetail = id => {
  getRepairOrderDetail({ id }).then(res => {
    res.repairOrderProgressVOList = res.repairOrderProgressVOList.map(item => ({
      ...item,
      feeDescription: item.feeDescription ? item.feeDescription.replace(/<b/gi, '<b style="font-weight:bold;font-size:28rpx" ') : ''
    }))
    detail.value = res
  })
}

const payHandle = () => {
  paymentRepairOrder({ orderNo: detail.value.orderNo }).then(res => {
    // 拉起支付
    if (res.prepayId) {
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: String(res.timeStamp),
        nonceStr: res.nonceStr,
        package: 'prepay_id=' + res.prepayId,
        signType: 'SHA256withRSA',
        paySign: res.paySign,
        orderInfo: {
          appId: '',
          timeStamp: String(res.timeStamp),
          nonceStr: res.nonceStr,
          package: ''
        },
        success: function (res) {
          getDetail(detail.value.id)
        },
        complete: function () {}
      })
    }
  })
}
</script>

<style scoped lang="scss">
.detail-c {
  background: linear-gradient(183deg, #fff1d6 0%, #f8fbff 100%);
  .status {
    border: 2px solid #fff;
  }
  .status-wait {
    color: #ff7733;
    background: radial-gradient(102.48% 213.7% at 74.57% 3.8%, rgba(255, 170, 128, 0.14) 0%, rgba(255, 119, 51, 0) 100%),
      linear-gradient(243deg, #ffebe0 35.22%, #f8fbff 102.23%);
  }
  .status-waitdone {
    color: #1e90ff;
    background: radial-gradient(102.48% 213.7% at 74.57% 3.8%, rgba(0, 128, 255, 0.14) 0%, rgba(0, 128, 255, 0) 100%),
      linear-gradient(243deg, #cef 35.22%, #f8fbff 102.23%);
  }
  .status-waitpay {
    color: #ff8000;
    background: radial-gradient(102.48% 213.7% at 74.57% 3.8%, rgba(242, 161, 0, 0.14) 0%, rgba(255, 170, 0, 0) 100%),
      linear-gradient(243deg, #fff1d6 35.22%, #f8fbff 102.23%);
  }
  .status-done {
    color: #00b277;
    background: radial-gradient(102.48% 213.7% at 74.57% 3.8%, rgba(103, 194, 58, 0.14) 0%, rgba(103, 194, 58, 0) 100%),
      linear-gradient(243deg, #f0f9eb 35.22%, #f8fbff 102.23%);
    background: linear-gradient(183deg, #e5fff2 0%, #f8fbff 100%), radial-gradient(243deg, #00ffaa 35.22%, rgba(0, 255, 170, 0) 100%);
  }
  .status-cancel {
    color: #909399;
    background: radial-gradient(102.48% 213.7% at 74.57% 3.8%, rgba(157, 166, 166, 0.14) 0%, rgba(184, 204, 204, 0) 100%),
      linear-gradient(243deg, #e4e7eb 35.22%, #f8fbff 102.23%);
  }
}
.label {
  font-weight: 400;
  font-size: 30rpx;
  color: #909399;
  line-height: 45rpx;
}
.value {
  font-weight: 400;
  font-size: 28rpx;
  color: #303133;
  line-height: 1.5;
}

.btn-c {
  position: fixed;
  bottom: 12rpx;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 100;
  .btn {
    height: 94rpx;
    background: #1e90ff;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    text-align: center;
    line-height: 94rpx;
    color: #fff;
    font-size: 32rpx;
  }
}
</style>
